<template>
    <template
        v-for="(item, index) in items"
        :key="item.id ?? items_.name ?? index"
    >
        <slot
            :item="item"
            :index="index"
            :update="update"
            :value="getValue(item)"
            :modify="(n: T) => modify(index, n)"
        ></slot>
    </template>
</template>
<script lang="ts" setup generic="T extends Aoe">
/**
 * 实现了元素修改操作
 *   items
 */

import type { Aoe } from 'aoe';
import { type ElasticGroupProps, useElasticGroup } from './useGroup';
import { arr_splice_ref } from './functions.ts';

const props = defineProps<ElasticGroupProps<T>>();
const modelValue = defineModel<unknown>();
const items = defineModel<T[]>('items');
const emit = defineEmits<{
    modify: [items?: T[]]
}>();

const modify = (index: number, item: T) => {
    arr_splice_ref(items, index, 1, item);
    if (items.value) emit('modify', items.value);
}

const { update, getValue } = useElasticGroup<T>(modelValue, props);

defineOptions({
    inheritAttrs: false,
});
</script>
<style scoped></style>